<!DOCTYPE html>
<html lang="en">

<head>
    <title>蓝天运动</title>
    <#include "/dk/app/components/meta.html" />
    <#include "/dk/app/components/stylesheets.html" />
    <link rel="stylesheet" href="/dk/app/stylesheets/courseList.css?v=3">
</head>

<body>
    <div id="app">
        <div class="top">
            <div class="am-g date theme-background-color1">
                <a class="am-u-sm-3" href="/dk/app/list/?date=${previous}&schoolId=${schoolId!}"><i class="am-icon-chevron-left"></i>&nbsp;前一天</a>
                <div class="am-u-sm-6">${date!} ${week1!''} {{weeDataString}}</div>
                <a class="am-u-sm-3" href="/dk/app/list/?date=${next}&schoolId=${schoolId!}">后一天&nbsp;<i class="am-icon-chevron-right"></i></a>
            </div>
        </div>
        <div class="list">
            <div class="am-g am-g-collapse item" v-for="(item, index) in list" v-key="item.id">
                <div class="am-u-sm-7 item-left">
                    <div class="title">{{ item.courseName }}</div>
                    <div class="subtitle">{{ item.topic }}</div>
                    <div class="info">{{ item.startTime }}~{{ item.endTime }}</div>
                    <div class="tags">
                        <span>已订:{{ item.joinCount }}</span>
                        <span v-if="item.limit != 0">剩余:{{ item.limit - item.joinCount < 0 ? 0 : item.limit - item.joinCount }}</span>
                    </div>
                </div>
                <div class="am-u-sm-5 item-right">
                    <div class="location"><i class="am-icon-map-marker"></i>&nbsp;{{ item.classroom }}</div>
                    <div class="teacher">{{ item.teacherName }}</div>
                    <div class="button-wrap">
                        <button class="am-btn theme-background-color2" v-if="item.status == 1" @click="unsubscribe(item.courseName, item.id)">退订</button>
                        <button class="am-btn" style="background-color: #A0D468!important" v-else @click="subscribe(item.courseName, item.id)">+订课</button>
                    </div>
                </div>
            </div>
        </div>
        <script src="/components/utils.js"></script>
        <#include "/dk/app/components/footer.html" />
    </div>
    <#include "/dk/app/components/scripts.html" />
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                list: toJson(`${items!{}}`),
                schools: []
            }
        },
        computed: {
            // 计算属性的 getter
            weeDataString: function() {
                var week = '${week}'
                if (week == 0) {
                    return '';
                } else if (week == 7) {
                    return '星期天';
                } else if (week == 1) {
                    return '星期一';
                } else if (week == 2) {
                    return '星期二';
                } else if (week == 3) {
                    return '星期三';
                } else if (week == 4) {
                    return '星期四'
                } else if (week == 5) {
                    return '星期五'
                } else if (week == 6) {
                    return '星期六'
                }
            }
        },
        mounted: function() {

            // for (var i = 0; i < this.list.length; i++) {
            //     var startDate = new Date();
            //     startDate.setTime(this.list[i].startTime);
            //     this.list[i].startTime = startDate.getHours() + ":" + startDate.getMinutes();
            //     var endDate = new Date();
            //     endDate.setTime(this.list[i].endTime);
            //     this.list[i].endTime = endDate.getHours() + ":" + endDate.getMinutes();
            // }
        },
        methods: {
            onLogout() {
                confirm("退出登录?", "确定", function() {
                    MtaH5.clickStat("app_logout")
                    this.window.location.href = '/dk/app/logout'
                })
            },
            subscribe(name, id) {
                confirm("您确定要订课 " + name + " 吗？", "订课", function() {
                    var param = Qs.stringify({
                        arrangeId: id
                    });
                    loading();
                    axios({
                            url: '/dk/app/submit',
                            method: 'post',
                            data: param,
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        })
                        .then(function(response) {
                            endLoading();
                            if (response.data.status == 200) {
                                remind("订课成功", function() {
                                    // window.location.href = "/jh/app/list?date=${date!}";
                                    window.location.reload()
                                });
                            } else if (response.data.status == 204) {
                                msg(response.data.msg);
                                console.log(response.data);
                            } else if (response.data.status == 205) {
                                msg(response.data.msg);
                                setTimeout(function() {
                                    window.location.href = response.data.info;
                                }, 2000)
                            } else {
                                msg("提交失败");
                                console.log(response.data);
                            }
                        })
                        .catch(function(error) {
                            endLoading();
                            msg("提交失败");
                            console.log(error);
                        });
                })
            },
            unsubscribe(name, id) {
                confirm("您确定要退订 " + name + " 吗？", "退订", function() {
                    var param = Qs.stringify({
                        arrangeId: id
                    });
                    loading();
                    axios({
                            url: '/dk/app/cancel',
                            method: 'post',
                            data: param,
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        })
                        .then(function(response) {
                            endLoading();
                            if (response.data.status == 200) {
                                remind("退订成功", function() {
                                    // window.location.href = "/jh/app/list?date=${date!}";
                                    window.location.reload()
                                });
                            } else if (response.data.status == 204) {
                                msg(response.data.msg);
                                // console.log(response.data);
                            } else {
                                msg("提交失败");
                                // console.log(response.data);
                            }
                        })
                        .catch(function(error) {
                            endLoading();
                            msg("提交失败");
                            // console.log(error);
                        });
                })
            }
        }
    })
    </script>
    <script>
    </script>
</body>

</html>